<script setup lang="ts">
import {useUserPinia} from '~/stores/user'
import {storeToRefs} from "pinia";
import {onMounted, ref, onBeforeMount} from "vue";
import HP5050 from "~/public/shop/HP5050_banner-Lido_03_Ivory_Boucle_1011-992x1120_672x448.webp"
// 用tm代替t，因为tm是响应式的而且可以解析对象
const {locale, setLocale, tm} = useI18n()
const userStore = useUserPinia()
const {token, rating_five} = storeToRefs(userStore);

// import Player from "xgplayer";
// import "xgplayer/dist/index.min.css";
// onMounted(() => {
//   new Player({
//     id: "mse", //元素id
//     lang: "zh", //设置中文
//     volume: 0, // 默认静音
//     autoplay: false, //自动播放
//     screenShot: true, // 开启截图功能
//
//     //视频地址
//     url: "https://cdn.free-stock.video/25122023/abstract-curve-chaos-paint-ink-that-design-91614-small.mp4",
//
//     //封面图
//     poster:
//         "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
//     fluid: true, // 填满屏幕 （流式布局）
//     playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
//   });
// });
/**
 * 屏幕尺寸
 */
const screenSize = ref({width: 0, height: 0});

/**
 * 图片是否加载完成
 */
const home_image1_load = ref(false)

/**
 * 获取组元素组件的宽度
 */
const getGroupWidth: any = computed(() => {
  if (screenSize.value.width > 1470) {
    return 1440;
  } else if (screenSize.value.width > 1008) {
    return 1000;
  } else {
    return 560;
  }
})

/**
 * 支付产品列表
 */

 const buy_product_list = ref([
    {
      id: "1",
      title: '线上收银台',
      subTitle: '轻松接收来自全球消费者的线上付款',
      src: "https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/product-checkout-payment.f3b911c8.svg",
      href: '/product/pay/onlinePay'
    },
    { 
      id: "2",
      title: '扫码签约',
      subTitle: '手机扫描大屏二维码以绑定支付方式',
      src: "https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/product-scan-to-pay.40547886.svg",
      href: '/product/pay/sign'
    },
    { 
      id: "3",
      title: '代扣',
      subTitle: '授权您直接从指定支付方式扣款',
      src: "https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/product-auto-debit.8a532cc3.svg",
      href: '/product/pay/withHolding'
    },
    { 
      id: "4",
      title: '订阅',
      subTitle: '周期性发起代扣',
      src: "https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/product-subscription-payment.00f1dd5e.svg",
      href: '/product/pay/subscriber'
    },
    {
      id: "5",
      title: '线下支付',
      subTitle: '一站式开通主流电子钱包的二维码支付',
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/product-instore-payment.539d1f0f.svg',
      href: '/product/pay/offlinePay'
    },
 ])

 const imporve_list = ref([
    {
      id: "1",
      title: '收入增长引擎',
      subTitle: '通过支付能力查询、智能重试和交易挽回，博得更高的支付成功率',
      src: "https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/product-revenus-booster.772ae20b.svg",
      href: '/product/strengthen/engine'
    },
    { 
      id: "2",
      title: '合并支付',
      subTitle: '支持多商户多币种合并支付，提升顾客付款效率',
      src: "https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/product-combined-payment.61843895.svg",
      href: '/product/strengthen/merge'
    },
    { 
      id: "3",
      title: '收单分账',
      subTitle: '平台商户将收单款项直接结算给多个参与方，降低汇兑损失',
      src: "https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/product-flexible-settlement.b0300eb9.svg",
      href: '/product/strengthen/splitting'
    }
 ])

 const sys_list = ref([
    {
      id: "1",
      title: '盗卡决策服务',
      src: "https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/index-icon-card.6b254210.svg",
      href: 'https://www.antom.com/cn/revenue-booster/'
    },
    { 
      id: "2",
      title: '盗卡拒付抗辩运营服务',
      src: "https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/index-icon-operate.21e51b9f.svg",
      href: 'https://www.antom.com/cn/combined-payment/'
    },
    { 
      id: "3",
      title: '风险门户服务',
      src: "https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/index-icon-gateway.c2822ecc.svg",
      href: 'https://www.antom.com/cn/flexible-settlement/'
    }
 ])

 const sys_list2 = ref([
    {
      id: "1",
      title: '领先的风控科技',
      subTitle: '全球领先的图计算、深度学习等算法，实现科学的实时风控决策，有效降低拒付发生。',
      src: "https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/index-icon-chart.dd1ce17b.svg",
    },
    { 
      id: "2",
      title: '全球风险情报',
      subTitle: '国际风险情报网络及时追踪全球黑产动向，提升攻防时效，带来更强风险感知。',
      src: "https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/index-icon-earth.f74de8df.svg",
    },
    { 
      id: "3",
      title: '风险专业洞察',
      subTitle: '上百名专家组成的风控团队沉淀多年丰富风险攻防经验，保障全球业务安全展业。',
      src: "https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/index-icon-risk.66ea47b2.svg",
    },
    { 
      id: "4",
      title: '平衡风控与体验',
      subTitle: '实时智能决策和动态3DS决策，在合理的欺诈率水位下，寻求最优订单转化率。',
      src: "https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/index-icon-balance.145f86f1.svg",
    },
 ])

 const market_list = ref([
 {
      id: "1",
      title: 'A+ Rewards',
      subTitle: '与电子钱包联合打造的数字营销阵地，一点触达全球数字支付用户',
      src: "https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/product-alipaypluse-%20rewards.1ca42dd2.svg",
      href: '/product/marketing/rewards'
    },
    { 
      id: "2",
      title: '支付营销',
      subTitle: '智能配置数字营销策略，灵活开展支付激励以促进交易',
      src: "https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/product-payment-marketing.2284772b.svg",
      href: '/product/marketing/payMarketing'
    }
 ])

 const solution_list= ref([
    {
      id: "1",
      title: '电商平台',
      subTitle: '助力平台客户向入驻商户提供更优质的服务',
      src: "https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/product-e-commerce-platforms.dde4bab9.svg",
      href: '/solution/platforms'
    },
    { 
      id: "2",
      title: '数字娱乐',
      subTitle: '即将推出，敬请关注',
      src: "https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/product-digital-entertainment-industry.af521fed.svg",
    }
 ])

 const solution_images= ref([
        {
          "id": "1",
          "text": "Google Play很荣幸能与支付行业创新者Antom合作，让消费者能够在我们的平台上轻松购买数字内容，让开发者能够安全地将他们的应用程序推广到世界各地。我们期待着两者持续深化合作，不断为用户带来新的价值。",
          "src": "https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*wt57TK_POeUAAAAAAAAAAAAADmesAQ/original",
        },
        {
          "id": "2",
          "text": "Cider通过与Antom建立与深化战略合作，快速在东南亚、欧美等重要市场中完成全链路支付布局并不断优化支付体验，为业务的持续增长打下坚实的基础；同时，联合Antom一起探索基支付营销创新，进一步提升用户体验与粘度。",
          "src": "https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*nGDPRKvXXt4AAAAAAAAAAAAADmesAQ/original",
        },
        {
          "id": "3",
          "text": "XP-Pen在海外20多个国家建立了在线商城，业务遍及欧美、东南亚及拉美等地区，自2022年6月与Antom建立战略合作关系，利用Antom在海外丰富的渠道网络以及便捷化的支付操作，帮助其海外用户带来更多样化、本地化的支付选择。",
          "src": "https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*IRj-Sbv3M3MAAAAAAAAAAAAADmesAQ/original",
        }
      ])

/**
 * 响应式i18n
 */
const image_icons = computed(() => {
  return tm("shop.body.choose.shopIcons");
})

const style_images = computed(() => {
  return tm("shop.body.choose.shopList")
})
const qualityIcons = computed(() => {
  return tm("shop.body.qualityIcons")
})
const buyers = computed(() => {
  return tm("shop.body.buyer")
})
const populars = computed(() => {
  return tm("shop.body.popular")
})
const brandIcons = computed(() => {
  return tm("shop.body.brandIcons")
})
const photo_images = computed(() => {
  return tm("shop.body.photos")
})
const carousel_Images = computed(() => {
  return tm("shop.body.carouselPhotos")
})
const brand_Images = computed(() => {
  return tm("shop.body.brand")
})
const pay_Images = computed(() => {
  return tm("shop.body.pay")
})


// 更新屏幕尺寸的方法
const updateScreenSize = () => {
  screenSize.value = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  // console.log("屏幕尺寸", screenSize.value.width)
};


onMounted(() => {
  window.addEventListener('resize', updateScreenSize);
  // 初始化屏幕尺寸
  updateScreenSize();
})

// 组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', updateScreenSize);
});

/**
 * 图片加载完成回调
 * @param val 图片地址
 */
const image_load = (val: any) => {
  // console.log("Image load successfully")
  home_image1_load.value = true;
}

</script>

<template>
  <v-app>
    <!-- 主图-->
    <v-sheet class="pt-[72px] relative">
      <!-- <banner-image link
                    HeadImage="https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*_IFUT4Xc0xoAAAAAAAAAAAAADmesAQ/original"
                    SubImage="https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*taq7Spk_4FQAAAAAAAAAAAAADmesAQ/original"/> -->
        <v-carousel
          cycle
          height="760"
          :show-arrows="false"
          show-arrows-on-hover
        >
          <v-carousel-item
            v-for="(slide, i) in carousel_Images"
            :key="i"
          >
          <banner-image link
                      :HeadImage="slide.headImage"
                      :SubImage="slide.subImage"/>
          </v-carousel-item>
        </v-carousel>
        <div class="absolute top-[35%] left-[255px] d-flex flex-column w-5/12">
            <img class="w-[315px] h-72[px] cursor-pointer" src="https://cdn.marmot-cloud.com/storage/2024/06/28/a4fbf78f-6d68-44a6-b9ff-53a8407f6924.png" alt="">
            <div class="mt-10">
              <span class="text-white text-2xl">Antom（安通环球）致力于为全球商家提供领先的支付服务，以一站式行业数字化支付解决方案，为客户业务增长提供助力。</span>
            </div>
            <div class="d-flex align-center text-white mt-10">
              <NuxtLink to="/contact-us">
                <v-btn class="px-18" rounded size="x-large" color="primary">联系我们</v-btn>
              </NuxtLink>
              
              <a class="ml-20 text-2xl cursor-pointer" href="https://www.antom.com/cn/uefa/">共同见证2024欧洲杯 ></a>
            </div>
        </div>
    </v-sheet>

    <!--    合作企业商标-->
    <v-sheet class="d-flex justify-center align-center my-2  flex-wrap py-6">
      <v-card
          width="192"
          elevation="0"
          class="rounded-0 text-center py-8">
        <div class="text-[#413E3A] flex flex-col">
          <span class="text-4xl font-semibold">40+</span>
          <span class="mt-5">本地收单市场</span>
        </div>
      </v-card>
      <v-card
          width="192"
          elevation="0"
          class="rounded-0 text-center py-8">
        <div class="text-[#413E3A] flex flex-col">
          <span class="text-4xl font-semibold">数百种</span>
          <span class="mt-5">支付方式</span>
        </div>
      </v-card>
      <v-card
          width="192"
          elevation="0"
          class="rounded-0 text-center py-8">
        <div class="text-[#413E3A] flex flex-col">
          <span class="text-4xl font-semibold">100+</span>
          <span class="mt-5">交易币种</span>
        </div>
      </v-card>
      <v-card
          width="192"
          elevation="0"
          class="rounded-0 text-center py-8">
        <div class="text-[#413E3A] flex flex-col">
          <span class="text-4xl font-semibold">100+</span>
          <span class="mt-5">交易币种</span>
        </div>
      </v-card>

    </v-sheet>

    <!-- 全球优质品牌首选 -->
    <div class="font-semibold text-3xl text-center mt-8">全球优质品牌首选</div>
    <v-sheet class="mx-auto d-flex justify-center align-center my-2  flex-wrap py-6 w-8/12">
      <v-card
          v-for="b in brand_Images"
          :key="b.id"
          elevation="0"
          class="rounded-0 px-4 ">
        <v-img width="192" cover :src="b.src"/>
      </v-card>
    </v-sheet>

    <!-- 支付产品 -->
    <div class="font-semibold text-3xl text-center mt-8">支付产品</div>
    <v-sheet class="mx-auto d-flex justify-center align-center my-2  flex-wrap py-6 w-8/12 text-xl text-center">
        <p>{{ $t("shop.body.partnerText") }}</p>
    </v-sheet>
    <v-sheet class="mx-auto d-flex justify-between align-center my-2  flex-wrap py-6 w-9/12">
      <div 
        v-for="bl in buy_product_list"
        :key="bl.id"
        class="bg-gray-50 rounded-0 px-4 w-[44rem] h-80 py-14 pl-16 mb-10"
      >
        <div
          class="d-flex align-center justify-between">
          <div class="">
            <div class="d-flex flex-column">
              <span class="font-semibold text-2xl mb-4">{{ bl.title }}</span>
              <span class="text-xl">{{ bl.subTitle }}</span>
            </div>
            <div class="mt-10">
              <NuxtLink :to="bl.href">
                <v-btn class="px-18" rounded size="x-large" color="primary">了解更多</v-btn>
              </NuxtLink>
            </div>
          </div>
          <div class="">
            <v-img width="200" height="200" cover :src="bl.src"/>
          </div>
      </div>
      </div>
    </v-sheet>
    <!-- 收单服务 -->
    <v-sheet class="mx-auto d-flex justify-center align-center my-2  flex-wrap py-6 w-8/12 text-xl text-center">
        <div class="w-6/12 d-flex flex-column justify-center align-center">
          <span class="font-semibold text-3xl mb-10">安全、合规地提供收单服务</span>
          <span>丰富的本地收单牌照资源和收单伙伴关系，让我们的服务遍及中国内地、中国香港、日本、韩国、泰国、印尼、菲律宾、巴基斯坦、新加坡、澳大利亚、美国及欧盟等市场。</span>
        </div>
        <div class="w-6/12 d-flex flex-column justify-center align-center">
          <v-img width="520" cover src="https://gw.alipayobjects.com/mdn/huamei_pwpjvv/afts/img/A*7EWwQ5CtIycAAAAAAAAAAAAADmesAQ/fmt.webp"/>
        </div>
    </v-sheet>

    <!-- 覆盖全球的收单能力 -->
    <div class="font-semibold text-3xl text-center mt-8">覆盖全球的收单能力</div>
    <v-sheet class="mx-auto d-flex justify-center align-center my-2  flex-wrap py-6 w-8/12 text-xl text-center">
        <p>{{ $t("shop.body.coverText") }}</p>
    </v-sheet>

    <!-- 查看支付方式 -->
    <NuxtLink to="/product/pay/payMethod">
      <div class="text-2xl text-center mt-8 text-sky-400">查看支付方式</div>
    </NuxtLink>
    <v-sheet class="mx-auto d-flex justify-center align-center my-2  flex-wrap py-6 w-8/12">
      <v-card
          v-for="b in pay_Images"
          :key="b.id"
          elevation="0"
          class="rounded-0 px-4 ">
        <v-img width="192" cover :src="b.src"/>
      </v-card>
    </v-sheet>

    <!-- 增强功能 -->
    <div class="mx-auto d-flex justify-center align-center flex-wrap py-6 bg-gray-50">
      <div class="d-flex flex-column justify-center align-center">
        <span class="font-semibold text-3xl mb-10">增强功能</span>
        <span>除了为您接收全球交易，我们还准备了一系列增强工具，帮您更精细地处理每一笔交易。通过防范欺诈、提升支付成功率等手段，助力实现降本增效并提升消费者满意度。</span>
      </div>
      <div class="mx-auto d-flex justify-between align-center my-2  flex-wrap py-6 w-9/12">
        <div 
          v-for="bl in imporve_list"
          :key="bl.id"
          class="bg-gray-50 rounded-0 px-4 w-[44rem] h-80 py-14 pl-16 mb-10 bg-white"
        >
            <div
              class="d-flex align-center justify-between">
              <div class="">
                <div class="d-flex flex-column">
                  <span class="font-semibold text-2xl mb-4">{{ bl.title }}</span>
                  <span class="text-xl">{{ bl.subTitle }}</span>
                </div>
                <div class="mt-10">
                  <NuxtLink :to="bl.href">
                    <v-btn class="px-18" rounded size="x-large" color="primary">了解更多</v-btn>
                  </NuxtLink>
                </div>
              </div>
              <div class="">
                <v-img width="200" height="200" cover :src="bl.src"/>
              </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-gray-50">
      <div class="font-semibold text-3xl text-center mt-8">千锤百炼的风控系统</div>
      <div class="mx-auto d-flex justify-center align-center my-2  flex-wrap py-6 w-8/12 text-xl text-center">
          <p>蚂蚁集团超10年国际支付反欺诈经验及算法沉淀，为您的交易安全保驾护航。</p>
      </div>
      <div class="mx-auto d-flex justify-between w-9/12">
        <div 
          v-for="bl in sys_list"
          :key="bl.id"
          class=" w-3/12 bg-white d-flex justify-center align-center w-[440px] h-[180px]  rounded-lg"
        >
          <div class="d-flex flex-column justify-center align-center">
            <v-img width="46" height="46" cover :src="bl.src"/>
            <span class="font-semibold text-2xl mt-4">{{ bl.title }}</span>
          </div>
        </div>
      </div>
      <div class="mx-auto d-flex justify-center align-center my-2  flex-wrap py-6 text-xl w-9/12">
        <div class="w-6/12 d-flex flex-column justify-center align-center">
          <div 
            v-for="bl in sys_list2"
            :key="bl.id"
            class="d-flex justify-center align-center mt-14"
          >
            <div class="d-flex flex-column">
              <v-img width="36" height="36" cover :src="bl.src"/>
              <span class="font-semibold text-2xl mt-4">{{ bl.title }}</span>
              <span class="mt-4">{{ bl.subTitle }}</span>
            </div>
          </div>
        </div>
        <div class="w-6/12 d-flex flex-column justify-center align-center">
          <v-img width="695" height="742" cover src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/index-picture-control.bba6471a.svg"/>
        </div>
      </div>
    </div>

    <!-- 数字化营销 -->
    <div class="font-semibold text-4xl text-center mt-8 py-10">数字化营销</div>
    <div class="mx-auto d-flex justify-center align-center my-2  flex-wrap py-6 w-8/12 text-xl text-center">
        <p>我们与支付渠道深度合作，提供一点接入、多市场灵活投放的一站式用户增长解决方案。全新的数字营销模式，为您解锁亿级消费者规模，高效实现生意转化。</p>
    </div>
    <div class="mx-auto d-flex justify-between align-center my-2  flex-wrap py-6 w-9/12">
      <div 
        v-for="bl in market_list"
        :key="bl.id"
        class=" px-4 w-[44rem] h-80  mb-10 "
      >
          <div
            class="bg-[#f9fafb] py-14 pl-16 rounded-[16px] d-flex align-center justify-between">
            <div class="">
              <div class="d-flex flex-column">
                <span class="font-semibold text-2xl mb-4">{{ bl.title }}</span>
                <span class="text-xl">{{ bl.subTitle }}</span>
              </div>
              <NuxtLink :to="bl.href">
                <v-btn class="px-18 mt-10" rounded size="x-large" color="primary">了解更多</v-btn>
              </NuxtLink>
            </div>
            <div class="">
              <v-img width="200" height="200" cover :src="bl.src"/>
            </div>
        </div>
      </div>
    </div>

    <!-- 增强功能 -->
    <div class="mx-auto d-flex justify-center align-center flex-wrap py-6 bg-gray-50">
      <div class="d-flex flex-column justify-center align-center">
        <span class="font-semibold text-3xl mb-10">解决方案</span>
        <span>基于对行业模式和展业痛点的深刻理解，我们构建产品组合，推出一站式垂直行业解决方案，帮助您更高效、更智能地应对全球支付需求，实现数字化经营。</span>
      </div>
      <div class="mx-auto d-flex justify-between align-center my-2  flex-wrap py-6 w-9/12">
        <div 
          v-for="bl in solution_list"
          :key="bl.id"
          class="bg-gray-50 rounded-0 px-4 w-[44rem] h-80 py-14 pl-16 mb-10 bg-white"
        >
            <div
              class="d-flex align-center justify-between">
              <div class="">
                <div class="d-flex flex-column">
                  <span class="font-semibold text-2xl mb-4">{{ bl.title }}</span>
                  <span class="text-xl">{{ bl.subTitle }}</span>
                </div>
                <div class="mt-10">
                  <NuxtLink :to="bl.href">
                    <v-btn class="px-18" rounded size="x-large" color="primary">了解更多</v-btn>
                  </NuxtLink>
                </div>
              </div>
              <div class="" >
                <v-img width="200" height="200" cover :src="bl.src"/>
              </div>
          </div>
        </div>
      </div>
    </div>

    <v-sheet class="">
      <!-- <banner-image link
                    HeadImage="https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*_IFUT4Xc0xoAAAAAAAAAAAAADmesAQ/original"
                    SubImage="https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*taq7Spk_4FQAAAAAAAAAAAAADmesAQ/original"/> -->
        <v-carousel
          cycle
          height="400"
          show-arrows-on-hover
          :show-arrows="false"
        >
          <v-carousel-item
            v-for="(s, i) in solution_images"
            :key="i"
            class="mx-auto w-9/12 h-full"
          >
            <div class="mx-auto d-flex justify-center align-center flex-wrap text-xl text-center h-full">
                <div class="w-6/12 d-flex flex-column justify-center align-center bg-blue-800 h-full text-white rounded-l-[40px] p-10">
                  <span>{{ s.text }}</span>
                </div>
                <div class="w-6/12 d-flex flex-column justify-center align-center bg-gradient-to-r from-cyan-500 to-blue-500 h-full rounded-r-[40px]">
                  <div class="d-flex flex-column justify-center align-center shadow-lg shadow-indigo-500/50 rounded-lg">
                    <v-img class=" rounded-lg bg-white" width="240" height="120" :src="s.src"/>
                  </div>
                </div>
            </div>
          </v-carousel-item>
        </v-carousel>
    </v-sheet>
    <footer-other></footer-other>
    <!--    <v-card class="py-8">-->
    <!--      屏幕宽度:{{ screenSize.width }}-->
    <!--      屏幕高度:{{ screenSize.height }}-->
    <!--      &lt;!&ndash;      <div>&ndash;&gt;-->
    <!--      &lt;!&ndash;        <v-btn @click="setLocale('en')">英文</v-btn>&ndash;&gt;-->
    <!--      &lt;!&ndash;        <v-btn @click="setLocale('zh')">中文</v-btn>&ndash;&gt;-->
    <!--      &lt;!&ndash;        <p>{{ $tm('welcome') }}</p>&ndash;&gt;-->
    <!--      &lt;!&ndash;        <p>{{ $tm('messages') }}</p>&ndash;&gt;-->
    <!--      &lt;!&ndash;      </div>&ndash;&gt;-->
    <!--    </v-card>-->

    <!-----------------------------------------------------------------------------------------分隔符-------------------------------------------------------------------------------------------------------------->

    <!--    视频插件-->
    <!--        <div id="mse"></div>-->
  </v-app>

</template>

<style scoped>
  :deep(.v-carousel__controls) {
    background: none;
  }
</style>